<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue组件-组件通信</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div class="test-10">
			
			<div>自定义事件</div>
			<b>总数：{{total}}</b>
			<component-07 @increase="handleGetTotal"
				 @reduce="handleGetTotal"></component-07>
			
			<br/>	 
			<div>使用v-model</div>
			<b>总数：{{total1}}</b>
			<component-08 v-model="total1"></component-08>
			
			<br/>	 
			<div>使用@input</div>
			<b>总数：{{total2}}</b>
			<component-09 @input="handleGetTotal2"></component-09>
			
			<br/>	 
			<div>表单数据通信</div>
			<b>总数：{{total3}}</b><br/>
			<component-10 v-model="total3"></component-10>
			<button @click="Increase">+1</button>
			<button @click="Reduce">-1</button>
			
			<br/><br/>	 
			<div>中央事件总线bus</div>
			<component-11></component-11>
			<span>{{busMsg}}</span>
			
			<br/><br/>	 
			<div>父链</div>
			<component-12></component-12>
			<span>{{parentMsg}}</span>
			
			<br/><br/>	 
			<div>子组件索引</div>
			<component-13 ref="comA"></component-13><br/>
			<button @click="handleRef">通过ref指定索引获取子组件</button>
			<span>{{refMsg}}</span>
		</div>
		<script>
			/*注册组件一定要在实例化Vue之前*/
			Vue.component("component-07",{
				template:[
				'<div>',
					'<button @click="handleIncrease">+1</button>',
					'<button @click="handleReduce">-1</button>',
				'</div>'].join(''),
				data : function() {
					return {
						counter: 0
					}
				},
				methods: {
					handleIncrease: function() {
						this.counter++;
						this.$emit("increase",this.counter);
					},
					handleReduce: function() {
						this.counter--;
						this.$emit("reduce",this.counter);
					}
				}
			});
			Vue.component("component-08",{
				template:[
				'<div>',
					'<button @click="handleIncrease1">+1</button>',
					'<button @click="handleReduce1">-1</button>',
				'</div>'].join(''),
				data : function() {
					return {
						counter: 0
					}
				},
				methods: {
					handleIncrease1: function() {
						this.counter++;
						//特殊事件名input对应v-model
						this.$emit("input",this.counter);
					},
					handleReduce1: function() {
						this.counter--;
						this.$emit("input",this.counter);
					}
				}
			});
			Vue.component("component-09",{
				template:[
				'<div>',
					'<button @click="handleIncrease1">+1</button>',
					'<button @click="handleReduce1">-1</button>',
				'</div>'].join(''),
				data : function() {
					return {
						counter: 0
					}
				},
				methods: {
					handleIncrease1: function() {
						this.counter++;
						//特殊事件名input对应v-model
						this.$emit("input",this.counter);
					},
					handleReduce1: function() {
						this.counter--;
						this.$emit("input",this.counter);
					}
				}
			});
			Vue.component('component-10',{
				props: ['value'],
				template: '<input :value="value" @input="updateValue"/>',
				methods: {
					updateValue: function(event) {
						this.$emit("input",event.target.value);
					}
				}
			});
			Vue.component('component-11',{
				template: '<button @click="handleEvent">传递事件</button>',
				methods: {
					handleEvent: function(event) {
						bus.$emit("on-message","组件component-11的数据");
					}
				}
			});
			Vue.component('component-12',{
				template: '<button @click="handleEvent">父链传递事件</button>',
				methods: {
					handleEvent: function(event) {
						//访问到父链后，可以做任何操作，比如直接修改数据
						this.$parent.parentMsg = "组件component-12的数据";
					}
				}
			});
			Vue.component('component-13',{
				template: '<b>我是有ref="comA"的子组件</b>',
				data: function() {
					return {
						subMsg: "子组件component-13数据"
					}
				}
			});
			var test = {
				total: 0,
				total1: 0,
				total2: 0,
				total3: 0,
				busMsg: "接受数据中...",
				parentMsg: "接受数据中...",
				refMsg: "接受数据中..."
			};
			var bus = new Vue();
			var vm = new Vue({
				el: ".test-10",
				data: test,
				methods: {
					handleGetTotal: function(total) {
						this.total = total;
					},
					handleGetTotal2: function(total) {
						this.total2 = total;
					},
					Reduce: function() {
						this.total3--;
					},
					Increase: function() {
						this.total3++;
					},
					handleRef: function() {
						//通过￥refs来访问指定实例
						this.refMsg = this.$refs.comA.subMsg;
					}
				},
				mounted: function() {//监听-钩子函数
					var _this = this;
					//在实例初始化时，监听来自bus实例的事件
					bus.$on("on-message",function(msg) {
						_this.busMsg = msg;
					});
				}
			});
		</script>
	</body>
</html>
